<template>
    <view class="bg-[#F8F8F8] h-[10rpx]"></view>
    <view class="px-[30rpx] ">
        <view class="text-[#3D3D3D]">
            <view class=" font-black text-[38rpx] mt-[17rpx]">场地</view>
            <view class="py-[34rpx] mx-[14rpx] flex items-center border-b border-[#EFEFEF] w-full">
                <text class="text-[35rpx]">学校</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="可多选">
                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
            <view class="py-[34rpx] mx-[14rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text class="text-[35rpx]">教学点</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="可多选">
                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
        </view>
        <view class="text-[#3D3D3D]">
            <view class=" font-black text-[38rpx] mt-[17rpx]">管理</view>
            <view class="py-[34rpx] mx-[14rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text class="text-[35rpx]">一级管理</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="可多选">
                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
            <view class="py-[34rpx] mx-[14rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text class="text-[35rpx]">二级管理</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="可多选">
                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
        </view>
        <view class="text-[#3D3D3D]">
            <view class=" font-black text-[38rpx] mt-[17rpx]">属性</view>
            <view class="py-[34rpx] mx-[14rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text class="text-[35rpx]">课堂类型</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="可多选">
                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
            <view class="py-[34rpx] mx-[14rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text class="text-[35rpx]">课程类型</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="可多选">
                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
        </view>
        <view class="text-[#3D3D3D]">
            <view class=" font-black text-[38rpx] mt-[17rpx]">定位</view>
            <view class="ml-[98rpx] ">
                <u-checkbox-group  shape="circle" @change="orientationChange">
                    <u-checkbox  labelSize="34rpx" :customStyle="{marginRight: '61rpx',marginTop: '26rpx',fontSize:'34rpx',fontWeight:500}" v-for="(item, index) in orientation" :key="index" :name="item.value"
                        :label="item.name"></u-checkbox>
                </u-checkbox-group>
            </view>

        </view>
        <view class="text-[#3D3D3D]">
            <view class=" font-black text-[38rpx] mt-[17rpx]">描述</view>
            <view class="ml-[98rpx] ">
                <u-checkbox-group  shape="circle" @change="descriptionChange">
                    <u-checkbox  labelSize="34rpx" :customStyle="{marginRight: '61rpx',marginTop: '26rpx',fontSize:'34rpx',fontWeight:500}" v-for="(item, index) in description" :key="index" :name="item.value"
                        :label="item.name"></u-checkbox>
                </u-checkbox-group>
            </view>

        </view>
        <view class="text-[#3D3D3D]">
            <view class=" font-black text-[38rpx] mt-[17rpx]">功能</view>
            <view class="ml-[98rpx] ">
                <u-checkbox-group  shape="circle" @change="featureChange">
                    <u-checkbox  labelSize="34rpx" :customStyle="{marginRight: '61rpx',marginTop: '26rpx',fontSize:'34rpx',fontWeight:500}" v-for="(item, index) in feature" :key="index" :name="item.value"
                        :label="item.name"></u-checkbox>
                </u-checkbox-group>
            </view>

        </view>
        <view class="flex mx-[109rpx] text-[34rpx] justify-between mt-[40rpx]">
            <view class=" rounded bg-[#ffd6cf] text-[#FF664A] w-[208rpx] h-[74rpx] flex items-center justify-center">取消</view>
            <view class="rounded bg-[#FD755D] text-[#fff] w-[208rpx] h-[74rpx] flex items-center justify-center">确定</view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive } from "vue";
const orientation = ref([{
    name: "免费",
    value: 1
}, {
    name: "公益",
    value: 2
}, {
    name: "普惠",
    value: 3
}])
const description = ref([{
    name: "名额有限",
    value: 1
}, {
    name: "学分兑换",
    value: 2
}])
const feature = ref([{
    name: "预约",
    value: 1
}, {
    name: "报名",
    value: 2
}, {
    name: "收藏",
    value: 3
}])
</script>
<style></style>